<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>视频展示</title>
	<meta name="viewport"  content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/bootstrap/css/bootstrap.min.css">
  	<link rel="stylesheet" type="text/css" href="${path}/resource/css/ysrmain.css">
	<link rel="stylesheet" href="${path}/resource/css/openVideo.css">
	
	<script src="${path}/resource/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="${path}/resource/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${path}/resource/js/echarts.min.js"></script>

	<script type="text/javascript"></script>
</head>
<body>
	<!-- 头部 -->
	<!-- 开始 -->
	 <jsp:include page="../allEquip/top_nav.jsp"></jsp:include> 
	<!-- 头部结束 -->
    <!-- 右侧内容区域 -->
    <!-- 右侧内容区域 -->
    <div class="right-content container-fluid ">
    	<div class="row back-w ">
    		<!-- 主要图表区域 -->
    		<span class="glyphicon glyphicon-chevron-left "></span>
    		<div class="video-list">  			
		    	<span class="glyphicon glyphicon-chevron-right"></span>    	
		    	<div class="list-group">
		    		<a id="xuanchuanpian" href="javascript:void(0);" class="list-group-item">宣传片</a>
		    		<a id="introduce" href="javascript:void(0);" class="list-group-item">介绍</a>
		    		<a id="newProduces" href="javascript:void(0);" class="list-group-item">新产品</a>
		    		<!-- <a class="list-group-item">视频4</a>
		    		<a class="list-group-item">视频5</a>
		    		<a class="list-group-item">视频6</a> -->
		    	</div>
		    </div>
	    	<video src="${path}/resource/video/xuanchuanpian.mp4" controls="controls" style="height: 100%;width:100%"></video>
		    
	    </div>
	    
	</div>    	



	
</body>
<script type="text/javascript">	
	$(function(){
		$(".img-spzs").parent().css({"color":"#82d1e8","text-shadow":" 0px 0px 10px #b7d6df"});
		$(".img-spzs").attr("src",'${path}/resource/images/spzs2.png')
		$(".img-spzs").parent().parent().addClass("dl-active");
		$(".img-spzs").parent().parent().css("padding","5px 0px");
		
		/*  */
		$(".glyphicon-chevron-right").click(function(){
			$(".video-list").animate({
			    
			    opacity:'0',
			    
			     width:'100px' 
			  },500,function(){
				  $(".glyphicon-chevron-left").show(300);
				  $(".video-list").hide();
				 
			  });
			$("video").animate({
				width:'+=200px'
			})
		})
		$(".glyphicon-chevron-left").click(function(){
			$(".video-list").show();
			$(".video-list").animate({
			    
			    opacity:'1',
			    
			    width:'200px'
			  },500,function(){
				  $(".glyphicon-chevron-left").hide(300);
				  
				  
			  });
			$("video").animate({
				width:'-=200px'
			})
		})
	})
	
	$('.list-group-item').click(function(){
		$('video')[0].src="${path}/resource/video/"+this.id+".mp4";
	});
</script>
</html>